<template>
  <div class="home">
    <van-nav-bar title="主页">
      <template #right>
        <van-icon @click="toPlay" name="expand" color="red" size="25" />
      </template>
    </van-nav-bar>
    <van-search show-action label="地址" placeholder="请输入搜索关键词">
      <template #action>
        <div>搜索</div>
      </template>
    </van-search>
    <van-tabs>
      <!-- 个性推荐 -->
      <van-tab title="个性推荐">
        <!-- 轮播图 -->
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="item in banners" :key="item.id">
            <img :src="item.imageUrl" />
          </van-swipe-item>
        </van-swipe>
        <!-- 私人FM模块，|引用vant自定义宫格 -->
        <van-grid id="FM">
          <van-grid-item icon="live" text="私人FM" />
          <van-grid-item icon="youzan-shield" text="每日歌曲推荐" />
          <van-grid-item icon="pause-circle" text="云音乐热歌榜" />
        </van-grid>
        <!-- 私人FM结束 -->
        <!-- 推荐歌单 -->
        <h2>推荐歌单 ></h2>
        <van-grid :column-num="3" id="tj">
          <van-grid-item
            v-for="value in result"
            :key="value.id"
            :icon="value.picUrl"
            :text="value.name"
            @click-thumb="toDetail(value.id)"
          />
        </van-grid>
      </van-tab>

      <van-tab title="歌单">
        <van-card
          price="听歌写评论 更健康"
          desc="评论过完的英文歌与潜力股"
          title="精品歌单"
          thumb="https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF"
        >
        </van-card>

        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: space-around;
          "
        >
          <span style="float: left; width: 50vw">全部歌单</span>
          <span>欧美 </span>
          <span>|</span>
          <span>民谣</span>
          <span>|</span>
          <span>民谣</span>
        </div>

        <div id="Song1">
          <div id="SongList1">
            <img
              src="https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF"
              alt=""
            />
            <h5>和声 | 被和声神点缀的音乐</h5>
          </div>
          <div id="SongList1">
            <img
              src="https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF"
              alt=""
            />
            <h5>和声 | 被和声神点缀的音乐</h5>
          </div>
          <div id="SongList1">
            <img
              src="https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF"
              alt=""
            />
            <h5>和声 | 被和声神点缀的音乐</h5>
          </div>
          <div id="SongList1">
            <img
              src="https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF"
              alt=""
            />
            <h5>和声 | 被和声神点缀的音乐</h5>
          </div>
        </div>
      </van-tab>

      <van-tab title="主播电台">主播电台</van-tab>
      <van-tab title="排行榜">排行榜</van-tab>
    </van-tabs>
  </div>
</template>

<script>
//引入服务
import { loadBannerAPI } from "../services/banners.js";
import { loadResultAPI } from "../services/result.js";
export default {
  name: "Home",
  data() {
    return {
      banners: [],
      result: [],
      // product: [],
    };
  },
  components: {},
  //初始化得时候调接口
  async created() {
    const res = await loadBannerAPI();
    const resSong = await loadResultAPI();
    this.banners = res.banners;
    this.result = resSong.result;
    console.log(res);
    console.log(resSong);
  },
  methods: {
    toDetail(id) {
      this.$router.push({
        name: "Detail",
        query: {
          id,
        },
      });
    },
    toPlay() {
      this.$router.push({
        name: "Play",
      });
    },
  },
};
</script>
<style>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.van-swipe img {
  width: 100vw;
  height: 30hw;
}
#FM {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

#Song1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#SongList1 {
  width: 50vw;
  height: 31vw;
  margin-bottom: 20vw;
  text-align: center;
}
#Song1 img {
  width: 50vw;
  height: 40vw;
}
#tj img {
  width: 19vw;
  height: 19vw;
}
</style>
